<div id="wrapper" style="width: 520px; height: 450px;">
        <div class="slider-wrapper theme-default">
            <div class="ribbon"></div>
            <div id="slider" class="nivoSlider">
                <img src="images/commerciale/casale/1.jpg" alt="" />
                <img src="images/commerciale/casale/2.jpg" alt="" />
                <img src="images/commerciale/casale/3.jpg" alt="" />
                <img src="images/commerciale/casale/4.jpg" alt="" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>

    </div>
    
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
        pauseTime: 4000, // How long each slide will show
        directionNavHide: true, // Only show on hover
        captionOpacity: 0.8, // Universal caption opacity
    });
});
</script>